{% extends "personal_center/base.html" %}
{% load state_display %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/technological/css/style.css">
    <script src="../../static/technological/js/sponsor.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        .add_background {
            background: #A9A9A9;
        }


    </style>
{% endblock %}

{% block right_content %}
    <div class="headline">
        <div id="document_addressee_details_tab"  class="tab_top">
            会议室申请管理
        </div>
    </div>
    <div id="new_models" style="width: 80%;height: 80%;position: absolute;display: none;">
        <div style="width: 700px;height: 500px;background: #F5F5F5;z-index: 10100;position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
            <div id="box" style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                <h5 id="modal-title" class="modal-title" style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;">会议室审批</h5>
                <span onclick="close_models()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
            </div>
            <hr>
            <div style="height: 400px;width: 100%;padding-top: 2%;padding-left: 2%;">
                <div>
                    <label for="" style="vertical-align: top;">审批：</label>
                    <input type="radio" name="approve" value="audit" checked>同意
                    <input style="margin-left: 3%;" type="radio" name="approve" value="draft">不同意
                </div>

                <div style="margin-top: 2%;width: 100%;">
                    <label for="" style="vertical-align: top;">意见：</label>
                    <textarea name="" id="opinion_detail" cols="30" rows="10" style="width: 90%;"></textarea>
                </div>
            </div>
            <hr>
            <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                <button id="summit_data" style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 10px;border-radius: 3px;background: #1E90FF;color: white;">提交</button>
            </div>
        </div>
    </div>

    <div id="my_application" style="width: 100%;height: 95.3%;overflow: auto;background-color: white;">
        <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
            <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                <section class="grid-main" style="height: 100%;">
                    <table id="main_table"></table>
                </section>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/administrative/js/layer.js"></script>
    <script>
            window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
        };

        function do_audit(id, state){
            if (state !== 'unaudit'){
                alert('只有待审核的申请才能审批！')
                return false
            }
            document.getElementById("new_models").style.display="table";
            $("#summit_data").attr("onclick", "summit_data('" + id + "')");

        }
        function close_models() {
            document.getElementById("new_models").style.display="none";
        }
        function summit_data(id) {
            var present_id = id;
            var approve = $("input[type=radio][name=approve]:checked").val();
            var audit_note = document.getElementById("opinion_detail").value;

            if (approve === "draft"){
                if (!audit_note){
                    alert("不同意请填写理由！");
                    return false
                }
            }
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/personal-center/conference_room_audit");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("id="+present_id+"&state="+String(approve)+"&audit_note="+String(audit_note));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            alert("审批成功");
                            window.location.reload();
                        }else {
                            alert(JsonDate["message"]);
                        }
                    }
                }
            };
        }

            const gridManagerName = "test",
                TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
                GM_PUBLISH_METHOD_MAP = {
                    init: {key: "init", relyInit: !1, title: "初始化", code: 'demo1.initGM(document.querySelector("table"));'},
                    get: {key: "get", relyInit: !0, title: "获取表格的实时配置信息", code: `GridManager.get('${gridManagerName}');`},
                    version: {key: "version", relyInit: !1, title: "获取当前GridManager的版本号", code: "GridManager.version;"},
                    getLocalStorage: {
                        key: "getLocalStorage",
                        relyInit: !0,
                        title: "获取表格用户记忆",
                        code: `GridManager.getLocalStorage('${gridManagerName}');`
                    },
                    resetLayout: {
                        key: "resetLayout",
                        relyInit: !0,
                        title: "重置表格布局",
                        code: `GridManager.resetLayout('${gridManagerName}', '800px', '500px');`
                    },
                    clear: {
                        key: "clear",
                        relyInit: !0,
                        title: "清除表格记忆数据",
                        code: `GridManager.clear('${gridManagerName}');`
                    },
                    getTableData: {
                        key: "getTableData",
                        relyInit: !0,
                        title: "获取指定tr所使用的数据",
                        code: `GridManager.getTableData('${gridManagerName}');`
                    },
                    getRowData: {
                        key: "getRowData",
                        relyInit: !0,
                        title: "获取指定tr所使用的数据",
                        code: `GridManager.getRowData('${gridManagerName}', document.querySelector("table[grid-manager=${gridManagerName}] tbody tr"));`
                    },
                    updateRowData: {
                        key: "updateRowData",
                        relyInit: !0,
                        title: "更新指定行所使用的数据",
                        code: `GridManager.updateRowData('${gridManagerName}', 'id', {id: 112, title: 'ccc'});`
                    },
                    updateTreeState: {
                        key: "updateTreeState",
                        relyInit: !0,
                        title: "更新树的展开状态",
                        code: `GridManager.updateTreeState('${gridManagerName}', true);`
                    },
                    setSort: {
                        key: "setSort",
                        relyInit: !0,
                        title: "手动设置排序",
                        code: `GridManager.setSort('${gridManagerName}', {createDate: 'ASC'});`
                    },
                    setConfigVisible: {
                        key: "setConfigVisible",
                        relyInit: !0,
                        title: "设置表头配置区域可视状态",
                        code: `GridManager.setConfigVisible('${gridManagerName}', true);`
                    },
                    setLineHeight: {
                        key: "setLineHeight",
                        relyInit: !0,
                        title: "配置行的高度",
                        code: `GridManager.setLineHeight('${gridManagerName}', '70px');`
                    },
                    showTh: {
                        key: "showTh",
                        relyInit: !0,
                        title: "设置列为可视状态",
                        code: `GridManager.showTh('${gridManagerName}', 'pic');`
                    },
                    hideTh: {
                        key: "hideTh",
                        relyInit: !0,
                        title: "设置列为隐藏状态",
                        code: `GridManager.hideTh('${gridManagerName}', 'pic');`
                    },
                    exportGrid: {
                        key: "exportGrid",
                        relyInit: !0,
                        title: "导出指定表格",
                        code: `GridManager.exportGrid('${gridManagerName}', 'demo中使用的导出').then(res=>{console.log('success')}).catch(err=>{console.error('error', err)});`
                    },
                    setQuery: {
                        key: "setQuery",
                        relyInit: !0,
                        title: "更改在生成组件时所配置的参数query",
                        code: `GridManager.setQuery('${gridManagerName}', {'userName':'baukh','sex':'男'});`
                    },
                    setAjaxData: {
                        key: "setAjaxData",
                        relyInit: !0,
                        title: "用于再次配置ajaxData数据",
                        code: `GridManager.setAjaxData('${gridManagerName}', {data: [{title: '通过setAjaxData动态添加的数据，其它项为空'}], totals: 1});`
                    },
                    refreshGrid: {
                        key: "refreshGrid",
                        relyInit: !0,
                        title: "刷新表格",
                        code: `GridManager.refreshGrid('${gridManagerName}');`
                    },
                    renderGrid: {
                        key: "renderGrid",
                        relyInit: !0,
                        title: "渲染表格",
                        code: `GridManager.renderGrid('${gridManagerName}');`
                    },
                    getCheckedTr: {
                        key: "getCheckedTr",
                        relyInit: !0,
                        title: "获取当前选中的行",
                        code: `GridManager.getCheckedTr('${gridManagerName}');`
                    },
                    getCheckedData: {
                        key: "getCheckedData",
                        relyInit: !0,
                        title: "获取选中行的渲染数据",
                        code: `GridManager.getCheckedData('${gridManagerName}');`
                    },
                    setCheckedData: {
                        key: "setCheckedData",
                        relyInit: !0,
                        title: "设置选中的数据",
                        code: `GridManager.setCheckedData('${gridManagerName}', [GridManager.getTableData('${gridManagerName}')[1]]);`
                    },
                    cleanData: {
                        key: "cleanData",
                        relyInit: !0,
                        title: "清除指定表格数据",
                        code: `GridManager.cleanData('${gridManagerName}');`
                    },
                    print: {key: "print", relyInit: !0, title: "打印当前页", code: `GridManager.print('${gridManagerName}');`},
                    showRow: {
                        key: "showRow",
                        relyInit: !0,
                        title: "显示隐藏行",
                        code: `GridManager.showRow('${gridManagerName}', 1);`
                    },
                    hideRow: {
                        key: "hideRow",
                        relyInit: !0,
                        title: "隐藏行",
                        code: `GridManager.hideRow('${gridManagerName}', 1);`
                    },
                    showLoading: {
                        key: "showLoading",
                        relyInit: !0,
                        title: "显示加载中",
                        code: `GridManager.showLoading('${gridManagerName}');`
                    },
                    hideLoading: {
                        key: "hideLoading",
                        relyInit: !0,
                        title: "隐藏加载中",
                        code: `GridManager.hideLoading('${gridManagerName}', 300);`
                    },
                    destroy: {
                        key: "destroy",
                        relyInit: !0,
                        title: "消毁指定的GridManager实例",
                        code: `GridManager.destroy('${gridManagerName}');`
                    }
                }, arg = {
                    gridManagerName: "test",
                    width: "100%",
                    height: "100%",
                    autoOrderConfig: {fixed: "left"},
                    checkboxConfig: {key: "id", fixed: "left"},
                    supportAjaxPage: !0,
                    sortMode: "single",
                    supportMenu: !0,
                    menuHandler: e => (e.unshift({
                        content: "自定义菜单", line: !0, onClick: e => {
                            alert(e)
                        }
                    }), e),
                    useCellFocus: !0,
                    useHideRow: !0,
                    supportMoveRow: !0,
                    moveRowConfig: {
                        key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                            console.log(e, t)
                        }
                    },
                    disableCache: !1,
                    ajaxData: function (e, t) {
                        var local_host = window.location.host;          // 获取当前IP
                        return "/personal-center/conference_room_audit_list"
                    },
                    exportConfig: {
                        fileName: e => {
                            const t = new Date;
                            let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                            for (let t in e) a = `${a}-${t}=${e[t]}`;
                            return a
                        }, suffix: "xls"
                    },
                    ajaxType: "POST",
                    checkedBefore: function (e, t, a) {
                        return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
                    },
                    checkedAfter: function (e, t, a) {
                        console.log("checkedAfter==", e, t, a)
                    },
                    checkedAllBefore: function (e, t) {
                        console.log("checkedAllBefore==", e, t)
                    },
                    checkedAllAfter: function (e, t) {
                        console.log("checkedAllAfter==", e, t)

                    },
                    sortingBefore: function (e) {
                        console.log("sortingBefore", e)
                    },
                    sortingAfter: function (e) {
                        console.log("sortingAfter", e)
                    },
                    ajaxBeforeSend: function (e) {
                        console.log("ajaxBeforeSend")
                    },
                    ajaxSuccess: function (e) {
                        console.log("ajaxSuccess")
                    },
                    ajaxError: function (e) {
                        console.log("ajaxError")
                    },
                    ajaxComplete: function (e) {
                        console.log("ajaxComplete")
                    },
                    adjustBefore: e => {
                        console.log("adjustBefore=>", e)
                    },
                    adjustAfter: e => {
                        console.log("adjustAfter=>", e)
                    },
                    responseHandler: e => (e.data.forEach((e => {
                        e.priority = e.id
                    })), e),
                    rowRenderHandler: (e, t) => e,
                    emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
                    columnData: [
                        {
                            key: "names",
                            text: "申请人",
                            align: "center",
                            disableMoveRow: !0
                        }, {
                            key: "department",
                            text: "申请部门",
                            align: "center",
                        }, {
                            key: "particulars",
                            text: "事由",
                            align: "center",
                        }, {
                            key: "statr_time",
                            text: "开始时间",
                            align: "center",
                        }, {
                            key: "end_time",
                            text: "结束时间",
                            align: "center",
                        }, {
                            key: "meeting_root",
                            text: "会议室",
                            align: "center",
                        }, {
                            key: "Number_people",
                            text: "人数",
                            align: "center",
                        }, {
                            key: "state",
                            text: "状态",
                            align: "center",
                        }, {
                            key: "audit_people",
                            text: "审批人",
                            align: "center",
                        }, {
                            key: "audit_note",
                            text: "审批意见",
                            align: "center",
                        },
                        {
                            key: "action",
                            width: "100px",
                            align: "center",
                            fixed: "right",
                            disableMoveRow: !0,
                            disableRowCheck: !0,
                            text: '<span style="color: red">操作</span>',
                            template: (e, t) => `<a class="plugin-action" id="${t.id}" href="conference_room_detail?id=${t.id}" onclick="">查看</a>`
                        }]
                }, demo1 = {
                    initSearch: function () {
                    }, initFN: () => {

                    }, initGM: function () {
                        new window.GridManager(table, arg, (e => {
                            console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                        }))
                    }, editRowData: function (e) {
                        window.GridManager.updateRowData("test", "id", {
                            id: window.parseInt(e.getAttribute("data-id")),
                            lastDate: (new Date).getTime()
                        })
                    }
                }, table = document.querySelector("#main_table");
            demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

    </script>
{% endblock %}
